<template>
  <div class="container-bg" :style="`background-image: url(${bgImgUrl})`">
    <div class="logo">
      <img alt="logo" :src="logoUrl" style="height: 80px" />
      <!-- <div class="logo-text">{{ logoUrl }}</div> -->
    </div>
    <!-- <LoginBanner /> -->
    <div
      :class="[
        'content',
        loginFormPlace === 1
          ? 'content-left'
          : loginFormPlace === 2
          ? 'content-right'
          : 'content-center'
      ]"
    >
      <div class="content-inner">
        <LoginForm v-model:formType="formType" v-if="formType === 'login'" />
        <ResetPwdForm
          v-model:formType="formType"
          v-if="formType === 'resetPwd'"
        />
      </div>
      <div class="footer">
        <Footer />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import LoginBanner from './Components/Banner.vue';
import LoginForm from './Components/LoginForm.vue';
import ResetPwdForm from './Components/ResetPwdForm.vue';
import { getLoginBgImg } from '@/apis/platform/index';

const formType = ref<'login' | 'resetPwd'>('login');
const loginFormPlace = ref(0);
const domain = ref('');
const bgImgUrl = ref<any>('images/loginBg1.png');
const logoUrl = ref<any>('images/logo2.png');
onMounted(() => {
  const url = window.location.hostname;
  domain.value = url.split('.')[0];
  getSys();
});
const getSys = async () => {
  const res = await getLoginBgImg(domain.value);
  bgImgUrl.value = res.clientLoginPage.loginBackgroundImage || bgImgUrl.value;
  logoUrl.value = res.clientLoginPage.Logo || logoUrl.value;
};
</script>

<style lang="less" scoped>
.container-bg {
  display: flex;
  height: 100vh;
  // background-image: url('../../../assets/images/bg.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  .banner {
    width: 550px;
    background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
  }

  .content {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;

    padding-bottom: 40px;
    .content-inner {
      // background-color: transparent;
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid;
      border-color: rgba(151, 151, 151, 0.3);
      border-radius: 4px;
      padding: 10px 40px;
    }
  }
  .content-left {
    justify-content: flex-start;
    margin-left: 20px;
  }
  .content-center {
    justify-content: center;
  }
  .content-right {
    justify-content: flex-end;
    margin-right: 20px;
  }

  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
  }
}

.logo {
  position: fixed;
  top: 24px;
  left: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;

  &-text {
    margin-right: 4px;
    margin-left: 4px;
    color: var(--color-fill-1);
    font-size: 20px;
  }
}
</style>
